<template>
  <div style="background: rgb(200, 200, 200, 0.5); height: 100vh">
    <div class="div1">
      <div style="width: 100%">
        <Header></Header>
        <div style="display: flex; flex: 1; justify-content: center">
          <router-view></router-view>
        </div>
      </div>
      <div class="div2">
        <div class="div3">后台管理系统</div>
        <Menu></Menu>
      </div>
    </div>
  </div>
</template>
  <script setup>
import Menu from "./Menu .vue";
import Header from "./Header.vue";
import { text } from "@/request/home/userapi.js";
import { useStore } from "../../../stores/counter";
import { onMounted } from "vue";
import { useRouter } from "vue-router";
const Store = useStore();
const Router = useRouter();
onMounted(async () => {
  const result = await text();
  if (result.data.code === 400) {
    Router.replace({
      name: "login",
    });
  }
});
</script>
  <style scoped>
  
.div1 {
  display: flex;
  flex-direction: row-reverse;
}
.div2 {
  display: flex;
  flex-direction: column;
}
.div3 {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  width: 200px;
  background: linear-gradient(to right, #fbc2eb, #a6c1ee);
}
@media (max-width: 450px) {
  .div1 {
    display: flex;
    flex-direction: column;
  }
}

@media (max-width: 1000px) {
  .div3 {
    display: none;
  }
}
</style>